<template>
  <div class="container notice-page">
    <uni-nav-bar dark color="#fff" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="公告列表" @clickLeft="$ui.back()" />
    <div class="notice-list">
      <div v-for="(item,index) in list" :key="index" class="notice-item" @click="openUrl(item)">
        <div class="item-top">
          <div class="flex-between-center notice-item-top">
            <div class="flex-between-center">
              <img src="@/assets/home/notice-img.png" alt="" class="notice-icon">
              <span class="van-ellipsis">{{ item.title }}</span>
            </div>
            <div class="notice-time">
              {{ item.time }}
            </div>
          </div>
          <!-- <img :src="item.logo" alt="" class="notice-img"> -->
          <p class="notice-p van-multi-ellipsis--l2">
            {{ item.description }}
          </p>
        </div>
        <div class="flex-between-center notice-btm">
          <span>查看详情</span>
          <u-icon name="arrow-right" class="btm-right" />
        </div>
      </div>
    </div>
    <div v-if="list.length == 0" class="flex-between-center list-none">
      <img src="@/assets/home/list-none.png" alt="" class="notice-none">
      <span>还没有任何消息</span>
    </div>
  </div>
</template>

<script>
  import {
    homeSwiperNotice
  } from '@/api/index'
  export default {
    data() {
      return {
        list: [],
        page: 1,
        loading: false,
        finished: false,
        refreshing: true,
        error: false
      }
    },
    onLoad() {
      this.get_notice_list()
    },
    methods: {
      openUrl(item) {
        this.$ui.push('/pages/mine/notice/detail?id=' + item.id)
      },
      get_notice_list() {
        let vm = this
        if (vm.refreshing) {
          vm.list = []
          vm.page = 1
        }
        vm.loading = true
        homeSwiperNotice({
          page: vm.page
        }).then(res => {
          vm.loading = false
          if (res.code === 1) {
            vm.refreshing = false
            const list = vm.list
            vm.list = [...list, ...res.data]
            // if (res.data.pages > this.page) {
            //   this.page++
            // } else {
            vm.finished = true
            // }
          } else {
            vm.error = true
          }
        }, () => {
          vm.loading = false
          vm.error = true
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .notice-page {
    background: #f6f8f9;

    .notice-top-tag {
      width: 100%;
      height: 504rpx;
      position: fixed;
      top: 0;
      left: 0;
      // background: #15667d;

      background: -moz-linear-gradient(#69e49b 10%,
          rgba(#73ea6f, 0.3),
          rgba(#000100, 0));

    }

    .list-none {
      position: absolute;
      bottom: 658rpx;
      left: 50%;
      transform: translateX(-50%);
      color: #787878;
      flex-direction: column;

      .notice-none {
        width: 198rpx;
        height: 198rpx;
        margin-bottom: 38rpx;
      }
    }

    .van-pull-refresh {
      height: 100%;
      overflow-y: scroll;
    }
  }

  .notice {
    // min-height: 100vh;
  }

  .header-reg {
    top: 0;
  }

  .notice-list {
    padding: 20rpx;
  }

  .notice-item {
    border-radius: 10rpx;
    background: rgba(#ffffff, 1);
    margin-bottom: 20rpx;

    .item-top {
      padding: 30rpx 20rpx 0;
      border-bottom: 2rpx solid #f7f8f9;
    }
  }

  .notice-item-top {
    display: flex;
    align-items: center;
    margin-bottom: 18rpx;

    .van-ellipsis {
      max-width: 400rpx;
    }

    .notice-time {
      color: #989898;
      font-size: 24rpx;
    }
  }

  .notice-btm {
    padding: 14rpx 20rpx;

    // justify-content: flex-end;
    span {
      color: #464646;
      font-size: 24rpx;
    }

    .van-icon {
      font-size: 28rpx;
      color: #464646;
    }
  }

  .notice-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }

  .notice-img {
    width: 100%;
    height: 200rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
  }

  .notice-p {
    height: 72rpx;
    line-height: 35rpx;
    font-size: 26rpx;
    color: #282828;
  }
</style>
